<template>
  <div>
    <h5>展示的是未分配任务，相关人员可在此认领</h5>
    <el-row>
      <el-table stripe header-cell-class-name="bindonce" :data="tableData.data" element-loading-text="列表正在加载中" border
        fit highlight-current-row>
        <el-table-column align="center" type="selection" width="55px"></el-table-column>
        <el-table-column align="center" label="主题" width="200" sortable prop="theme">
        </el-table-column>
        <el-table-column align="center" label="环节" width="150" sortable prop="taskName">
        </el-table-column>
        <el-table-column align="center" label="创建时间" width="180" sortable prop="startTime" :formatter="formatDate">
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" min-width="230" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleAssignTask(scope.row)">认领</el-button>
            <el-button type="text" size="mini" @click="showHistory(scope.row)">历史</el-button>
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align:right;">
        <el-pagination @size-change="handlePageSizeChange" @current-change="handlePageStartChange"
          :current-page="tableData.start" :page-sizes="[10, 20, 30, 40]" :page-size="tableData.limit"
          layout="total, sizes, prev, next, jumper" :total="tableData.total"></el-pagination>
      </p>
    </el-row>
    <history :processInstanceId="processInstanceId" :visible="dialogHistoryVisible"
      @onClose="dialogHistoryVisible = false"></history>
  </div>
</template>

<script>
  import vueJsonEditor from 'vue-json-editor'
  import access from '../api/access.js'
  import handle from '../components/handle.vue'
  import history from '../components/history.vue'

  export default {
    data() {
      return {
        dialogHistoryVisible: false,
        tableData: {
          start: 1,
          limit: 10,
          total: 0,
          data: []
        },
        processInstanceId: null
      }
    },
    components: {
      vueJsonEditor,
      handle,
      history
    },
    mounted: function() {
      this.loadTableData()
    },
    methods: {
      formatDate(row, column) {
        let data = row[column.property]
        if (data == null) {
          return null
        }
        let dt = new Date(data)
        return dt.format('yyyy-MM-dd HH:mm:ss')
      },
      loadTableData: function() {
        access.listAssignable(this.tableData.start, this.tableData.limit).then(res => {
          this.tableData.data = res.data || []
          this.tableData.total = res.total || 0
        })
      },
      handlePageSizeChange(value) {
        this.tableData.limit = value
        this.loadTableData()
      },
      handlePageStartChange(value) {
        this.tableData.start = value
        this.loadTableData()
      },
      handleAssignTask(row) {
        this.$confirm('认领任务后，该任务将属于您，其他人不再看到此任务，确定认领吗？', '提示').then(btn => {
          access.claimTask(row.id).then(res => {
            if (!res.success) {
              this.$message.error(res.message || '认领失败')
            } else {
              this.$message.success('认领成功')
              this.loadTableData()
            }
          })
        }, btn => {})
      },
      showHistory(row) {
        this.processInstanceId = row.processInstanceId
        this.dialogHistoryVisible = true
      }
    }
  }
</script>

<style>
  .jsoneditor-vue .jsoneditor {
    min-height: 200px;
  }
</style>
